//预览界面
import React,{useEffect, useState} from "react";
import "./article.css"
import ArticleComponents from "./index"
import {    useNavigate,useLocation  } from 'react-router-dom'
import * as Action from "../../common/Action"
import {IconRight,IconLeft} from "@arco-design/web-react/icon"
type dataStruct={
    hasEnter:boolean,
    loading:boolean,
    showList:any[],
}
var hasList:any[]=[]
export function Preview({onSetTarget,setTitle}){
    let showList:any[]=[]
    const navigate=useNavigate()
    let stateData=useLocation().state
    let pageTitle=stateData?.pageTitle
    let [data,setData]:[
        dataStruct,
        Function
    ]=useState({
        hasEnter:false,
        loading:true,
        showList:[],
    })
    const requestData=()=>{
        Action.Message({
            type:'common',
            content:"请求中"
        })
        window['netRequest']({
            url:'/getArticleList',
            method:"POST",
            data:{
                cate:stateData?.cate || null
            }
        }).then(res=>{
            console.log(res)
            if(res.data.code=='success'){
                Action.Message({
                    type:'success',
                    content:"请求成功"
                })
                
                showList=[]
                for(let i=0;i<res.data.data.length;i++){
                    showList.push(res.data.data[i].articleData)
                }
                showList.push({
                    bgType:"image",
                    title:"图片测试",
                    collectionID:'collection1',
                    imageSrc:"https://photos.guitu18.com/photos/6e2fdace14149bcf614720ad09a580f4.jpg-jpeg"
                })
                setData({
                    hasEnter:true,
                    loading:false,
                    showList:showList,
                })
            }
            else{
                Action.Message({
                    type:'error',
                    content:"数据错误"
                })
                setData({
                    ...data,
                    loading:false
                })
            }
        }).catch(err=>{
            Action.Message({
                type:'error',
                content:"无法请求"
            })
            setData({
                ...data,
                loading:false
            })
        })
    }

    useEffect(()=>{
        console.log("set from article")
        if(pageTitle){
            setTitle(pageTitle)
        }else{
            setTitle({
                title:'夜月归途',
                desc:'我曾踏足山巅，也曾进入低谷，二者都让我受益良多！',
                actionType:1,
            })
        }
        requestData()
    },[stateData])
    
    function toImage(collectionID){
        navigate("/imagesDetail",{
            state:{
                collectionID:collectionID
            }
        })
    }
    function toTarget(id:string){
        console.log(id)
        onSetTarget(id,()=>{
            navigate("/articleDetail")
        })
    }
    return(
        <div style={{padding:'20px',width:'calc(100% - 40px)'}}>
            {
                data.showList.map(node=>{
                    return <div className={
                        node.bgType=='image'?"previewContainer_image" :"previewContainer" 
                    }
                        style={{backgroundImage:node.bgType=='image'?`url(${node.imageSrc})`:''}} 
                        key={node.articleId}>
                                {
                                    node.bgType=='image'?
                                        <div style={{
                                            width:'100%',
                                            height:'100%',
                                        }}
                                        onClick={()=>{toImage(node.collectionID)}}
                                        >
                                            <h3 className="bgTypeText"  >
                                                {node.title}
                                            </h3>
                                        </div>
                                    :(
                                    <>
                                        <div className="pewviewTitle" onClick={()=>{toTarget(node.articleId)}}>{node.title}</div>
                                        <div className="pewviewContent">{node.content}</div>
                                        <ArticleComponents.BottomAction 
                                            author={node.author}
                                            uploadTime={node.uploadTime}
                                            message={node.messageNumber}
                                        ></ArticleComponents.BottomAction>
                                    </>
                                    )
                                }
                                
                            </div>
                })
            }
            <div style={{clear:'both'}}></div>
            <div className="pageSelect">
                <div className="page">
                    <div className="pageButton" style={{borderRadius:'10px 0 0 10px'}}>
                        <IconLeft style={{marginTop:'0'}}></IconLeft>
                    </div>
                    <div className="pageButton" style={{background:'rgb(var(--gray-10))',color:'rgb(var(--gray-1))'}}>
                        1
                    </div>
                    <div className="pageButton">
                        2
                    </div>
                    <div className="pageButton" >
                        ...
                    </div>
                    <div className="pageButton">
                        5
                    </div>
                    <div className="pageButton" style={{borderRadius:'0 10px 10px 0'}}>
                        <IconRight style={{marginTop:'0'}}></IconRight>
                    </div>
                </div>
            </div>
        </div>
    )
}